﻿@inject NavigationManager NavManager

<div class="card shadow" style="width: 18rem;">
    <img src="@(!string.IsNullOrWhiteSpace(Trail.Image) ? $"images/{Trail.Image}" : "https://via.placeholder.com/286x190.jpg?text=No+Image+For+Trail")" class="card-img-top">
    <div class="card-body">
        <h5 class="card-title">@Trail.Name</h5>
        <h6 class="card-subtitle mb-3 text-muted"><span class="oi oi-map-marker"></span> @Trail.Location</h6>
        <div class="d-flex justify-content-between mb-3">
            <span><span class="oi oi-clock mr-2"></span> @Trail.TimeFormatted</span>
            <span><span class="oi oi-infinity mr-2"></span> @Trail.Length km</span>
        </div>
        <button class="btn btn-primary" title="View" @onclick="@(async () => await OnSelected.InvokeAsync(Trail))">
            <i class="bi bi-binoculars"></i>
        </button>
        <FavoriteButton Trail="Trail" />
        <AuthorizeView>
            @if (Trail.Owner.Equals(context.User.Identity?.Name, StringComparison.OrdinalIgnoreCase) || context.User.IsInRole("Administrator"))
            {
                <button class="btn btn-outline-secondary float-right" title="Edit" @onclick="@(() => NavManager.NavigateTo($"/edit-trail/{Trail.Id}"))">
                    <i class="bi bi-pencil"></i>
                </button>
            }
        </AuthorizeView>
    </div>
</div>

@code {
    [Parameter, EditorRequired] public Trail Trail { get; set; } = null!;
    [Parameter, EditorRequired] public EventCallback<Trail> OnSelected { get; set; }
}